<template class="publish-container">
  <div>
     <el-card class="box-card">
        <!-- 面包屑头部 -->
      <div slot="header" class="clearfix">
        <my-breadcrumb>发布文章</my-breadcrumb>
      </div>
      <!-- 表单 -->
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="form.title" />
        </el-form-item>
        <!-- 富文本编辑器的引用 -->
        <el-form-item label="内容：" >
          <quill-editor  v-model="form.content" :options="editorOption"></quill-editor>
        </el-form-item>

        <el-form-item label="封面">
          <!--coverType 这个属性怎么得来的值 change事件,绑定值变化时触发的事件
          它的回调的参数是选中的 Radio label 值
          这里面的name属性还是原生的name属性,没有意思的变化 -->
          <el-radio-group v-model="form.coverType"  @change="hImageTypeChange">
            <el-radio :label="1" name="type">单图</el-radio>
            <el-radio :label="3" name="type">三图</el-radio>
            <el-radio :label="0" name="type">无图</el-radio>
            <el-radio :label="-1" name="type">自动</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 图片显示区域 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成
        表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、-->
        <el-form-item label="" v-if="form.coverType>0">
          <!--通过基础的 24 分栏，迅速简便地创建布局
          通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局
          简单讲就是把一行row总共分成24分 , :span=6 这个col就分row的6分,一次类推
          row 和 col 是配合一起出现的  -->
          <el-row>
            <el-col :span="6" v-for="(item,idx) in form.coverType" :key="idx">
                <my-cover v-model="form.coverImages[idx]"/>
            </el-col>
          </el-row>
          <!-- el插件中form的行,都是以 </el-form-item> 的方式实现的 -->
        </el-form-item>

        <!-- 频道组件 -->
        <my-channel v-model="form.channelId"></my-channel>

        <el-form-item>
          <el-button
          :loading="isLoading"
          type="primary" @click="hAdd(false)">发表</el-button>

          <el-button
          :loading="isLoading"
          @click="hAdd(true)">存入草稿</el-button>
        </el-form-item>
      </el-form>
     </el-card>
  </div>
</template>

<script>
// 导入富文本编辑器的样式
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入它的组件
import { quillEditor } from 'vue-quill-editor'

export default {
  name: 'addArticle',
  components: {
    quillEditor
  },
  data () {
    return {
      // 给几个需要有加载动作的按钮添加加载事件
      isLoading: false,
      // 用v-model,那么对应的属性值需要绑定的内容,data的form中要有
      form: {
        title: '远赴人间惊鸿宴，一睹人间盛世颜',
        content: '有些爱，只能止于唇齿，掩于岁月。 我喜欢来日方长的男人和不堪回首的女人，是他们把生活搞得意味深长。',
        coverType: '',
        coverImages: [], // 保存对应的封面图的地址,写插件的终极目的就是为了得到这几个数据
        channelId: ''
      },
      // 富文本的配置对象,文本要求的
      editorOption: {
        // 占位配置
        placeholder: '',
        modules: {
          // 配置工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['image']
          ]
        }
      }
    }
  },
  methods: {
    // 构建参数
    creatParams () {
      const { title, content, channelId } = this.form
      const paramsObj = {
        title: title,
        content: content,
        cover: {
          type: 0,
          images: []
        },
        channel_id: channelId
      }
      return paramsObj
    },
    hAdd (state) {
      // console.log(state)
      const paramsObj = this.creatParams()
      this.$axios({
        method: 'POST',
        url: '/mp/v1_0/articles?draft=' + state,
        data: paramsObj
      }).then(res => {
        this.$message.success('添加文章成功')
        // console.log(res)
      }).catch(err => {
        console.log(err)
        this.$message.error('添加文章失败')
      })
    },
    // 用户切换不同封面是会引起这个事件
    hImageTypeChange () {
      // console.log(this.form.coverType) 显示的是label的值
      if (this.form.coverType === 1) {
        // 这里使用到一个新的数组方法 数组:arr.length = 1; 只会保存arr[0]的值，其它会清空掉
        // 这样可以判定,当点击一张图片的时候,如果之前存有三张图片,那么只会留下第一张
        this.form.coverImages.length = 1
      }
    }
  }
}
</script>

<style scoped lang='less'>
// 在父组件中去设置子组件的样式，加上/deep/ 实现穿透功能

/deep/ .ql-editor{
  height: 300px;
}

/deep/ .ql-toolbar.ql-snow{
  padding: 0 8px;
}
</style>
